<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/11/18
  Time: 16:23
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="layui/css/layui.css"/>
</head>
<body>
<form class="layui-form" style="display:none;padding:20px;"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <div class="layui-form-item">
        <label class="layui-form-label">学生姓名</label>
        <div class="layui-input-block">
            <input type="text" name="bookName" placeholder="请输入" autocomplete="off" class="layui-input" >
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">学生年龄</label>
        <div class="layui-input-block">
            <input type="text" name="bookPrice" placeholder="请输入" autocomplete="off" class="layui-input" lay-verify="bookPrice">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">学生的生日</label>
        <div class="layui-input-block">
            <input type="text" id="groundingDate" name="groundingDate" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="go">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
    <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
</form>
<button type="button" class="layui-btn" id="add">添加</button>
<table id="demo1" lay-filter="test1"></table>
<script type="text/javascript" src="layui/layui.js"></script>
<script src="js/jquery-1.12.4.js"></script>
<script>
    //在本页面中要使用layer组件了。后期使用别的组件的时候都要这样引入
    layui.use(["table","form","layer"], function(){
        //可以使用这个组件。
        var table=layui.table;
        var form = layui.form;

        var laydate=layui.laydate;
        var layer=layui.layer;
        //调用table的方法。
        //第一个实例
        table.render({
            elem: '#demo1'
            ,url: 'Producta' //数据接口
            ,method:"get"
            ,page:false
            ,limit:2
            ,limits:[2,4,6,8,10]
            ,cols: [[ //表头
                {field: 'bookId', title: '编号',}
                ,{field: 'bookName', title: '姓名'}
                ,{field: 'bookPrice', title: '年龄'}
                ,{field: 'groundingDate', title: '生日'}
                ,{ title: '操作',toolbar:"#toolbarDemo"}

            ]]
        });
        //监听工具条
      // table.on('tool(test1)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
      //       var data = obj.data; //获得当前行数据,当前行的student对象
      //       var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
      //       if(layEvent === 'delete'){ //删除
      //           //confirm确认
      //           layer.confirm("是否确认删除",function(index){
      //               //发出ajax请求
      //               $.ajax({
      //                   url:"students/"+data.id,
      //                   type:"DELETE",
      //                   success:function(){
      //                       //重载table表格
      //                       table.reload("demo1",{
      //                           page: {curr: 1}
      //                       });
      //                       layer.msg("删除成功！");
      //                   }
      //               });
      //               layer.close(index);
      //           });
      //       } else if(layEvent === 'update'){ //编辑
      //           alert("编辑"+data.id);
      //       }
      //   });
      //
      //
      //   /*设置添加学生的表单开始*/
      //   $("#add").click(function(){
      //       layer.open({
      //           type:1,
      //           title:"添加学生页面",
      //           content:$("form"),
      //           area: ['500px', '500px']
      //       });
      //   });
      //
      //
      //   laydate.render({
      //       elem:"#birth"
      //   });
      //
      //
      //   form.on("submit(go)",function(obj){
      //       var json=obj.field
      //       //发出ajax请求
      //       $.ajax({
      //           url:"students",
      //           type:"post",
      //           data:JSON.stringify(json),
      //           contentType:"application/json",
      //           success:function(){
      //               //关闭弹出层
      //               layer.closeAll();
      //               //清空表单中的数据
      //               $("form").get(0).reset();
      //               //刷新table表格
      //               table.reload("demo1");
      //           }
      //       });
      //       return false;
       // })
        /*设置添加学生的表单结束*/
    });
</script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
        <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
    </div>
</script>
</body>
</html>
